<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2属性</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="firstName"><br/>
        <input type="text" v-model="lastName"><br/>
        <input type="text" v-model="fullName"><br/>
        <input type="text" v-model="fullName2"><br/>
        <input type="text" v-model="fullName3"><br/>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            //属性
            data: {
                firstName: 'A',
                lastName: 'B',
                fullName2: 'A',
            },
            //计算属性： 初始化显示，相关属性发生变化会执行
            computed: {
                fullName(){
                    return this.firstName + " " + this.lastName;
                },
                fullName3: {
                    //读取该属性时调用该函数
                    get(){
                        return this.firstName + " " + this.lastName;
                    },
                    //属性值改变时调用该函数
                    set(value){
                        this.firstName = value.split(" ")[0];
                        this.lastName = value.split(" ")[1];
                    }
                }
            },
            //监视属性
            watch: {
                //监视firstName的变化
                firstName: function (newValue, oldValue) {
                    this.fullName2 = newValue +" " + this.lastName;
                }
            }
        });
        //$watch方法 监视lastName
        vm.$watch('lastName',function (newValue, oldValue) {
            this.fullName2 = this.firstName + " " + newValue;
        });
    </script>
</body>
</html>